<template>
  <div class="messageDetailed">
    <el-row :gutter="20" class="messagenav">
      <el-col :span="4"><div>基本信息</div></el-col>
      <el-col :span="20">
        <el-row :gutter="20">
          <el-col :span="6"><div>入住时间：14:00之后</div></el-col>
          <el-col :span="6"><div>离店时间：12:00之后</div></el-col>
          <el-col :span="6">
            <div v-if="hotelData.renovat_time == 'null'">
              {{ hotelData.creation_time }}
            </div>
            <div v-else>
              {{ hotelData.creation_time }}/{{ hotelData.renovat_time }}
            </div>
          </el-col>
          <el-col :span="6"
            ><div>酒店规模：{{ hotelData.roomCount }}间客房</div></el-col
          >
        </el-row>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="messagenav">
      <el-col :span="4"><div>主要设施</div></el-col>
      <el-col :span="20">
        <span v-for="(item, index) in hotelData.hotelassets" :key="index">
          <span
            class="installation"
            v-if="item.type == '主要设施' || item.type == '房间设施'"
          >
            {{ item.name }}
          </span>

          <span v-if="item.length == 0" class="installation">-</span>
        </span>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="messagenav">
      <el-col :span="4"><div>酒店服务</div></el-col>
      <el-col :span="20">
        <span v-for="(item, index) in hotelData.hotelassets" :key="index">
          <span v-if="item.type == '酒店服务'">{{ item.name }}；</span>
          <span v-if="item.length == 0">-</span>
        </span>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="messagenav">
      <el-col :span="4"><div>品牌信息</div></el-col>
      <el-col :span="20">
        <span v-if="hotelData.hotelbrand == null">-</span>
        <span v-else>{{ hotelData.hotelbrand.name }}</span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: ["hotelData"],
};
</script>

<style lang="less" scoped>
.messageDetailed {
  margin-bottom: 40px;
  .messagenav {
    padding: 20px;
    border-bottom: 1px solid #f1f1f1;
  }

  .installation {
    display: inline-block;
    background-color: #eeeeee;
    padding: 5px 10px;
    margin-right: 10px;
  }
}
</style>